﻿<template>
  <s-layout title="注册" :bgStyle="{ color: '#FFF' }">
    <view class="register-wrap">
      <view class="register-container">
        <view class="logo-section">
          <view class="brand-logo">
            <text class="logo-text">巴蜀客家</text>
            <view class="logo-decoration"></view>
          </view>
          <view class="welcome-text">注册新账号</view>
          <view class="sub-text">传承客家文化，品味地道美食</view>
        </view>

        <!-- 注册表单 -->
        <view class="register-form">
          <view class="form-card">
            <uni-forms
              ref="registerRef"
              v-model="registerForm"
              :rules="registerRules"
              validateTrigger="bind"
            >
              <uni-forms-item name="mobile">
                <view class="input-container">
                  <view class="input-wrapper">
                    <view class="input-icon">
                      <view class="icon-bg">📱</view>
                    </view>
                    <uni-easyinput
                      placeholder="请输入手机号"
                      v-model="registerForm.mobile"
                      type="number"
                      maxlength="11"
                      :inputBorder="false"
                      :styles="inputStyles"
                    />
                    <!-- #ifdef MP-WEIXIN -->
                    <button
                      class="get-phone-btn"
                      open-type="getPhoneNumber"
                      @getphonenumber="getWechatPhone"
                      size="mini"
                    >
                      <view class="get-phone-content">
                        <text class="get-phone-text">获取</text>
                      </view>
                    </button>
                    <!-- #endif -->
                  </view>
                  <view class="input-line"></view>
                </view>
              </uni-forms-item>



              <uni-forms-item name="password">
                <view class="input-container">
                  <view class="input-wrapper">
                    <view class="input-icon">
                      <view class="icon-bg">🔒</view>
                    </view>
                    <uni-easyinput
                      type="password"
                      placeholder="请输入密码（6-20位）"
                      v-model="registerForm.password"
                      :inputBorder="false"
                      :styles="inputStyles"
                    />
                  </view>
                  <view class="input-line"></view>
                </view>
              </uni-forms-item>

              <uni-forms-item name="confirmPassword">
                <view class="input-container">
                  <view class="input-wrapper">
                    <view class="input-icon">
                      <view class="icon-bg">🔑</view>
                    </view>
                    <uni-easyinput
                      type="password"
                      placeholder="请确认密码"
                      v-model="registerForm.confirmPassword"
                      :inputBorder="false"
                      :styles="inputStyles"
                    />
                  </view>
                  <view class="input-line"></view>
                </view>
              </uni-forms-item>
            </uni-forms>

            <button class="register-btn" @tap="register" :loading="loading">
              <view class="btn-content">
                <text class="btn-text">立即注册</text>
                <view class="btn-shine"></view>
              </view>
            </button>
          </view>
        </view>

        <!-- 登录链接 -->
        <view class="login-section">
          <text class="login-text">已有账号？</text>
          <text class="login-link" @tap="goToLogin">立即登录</text>
        </view>

        <!-- 服务协议 -->
        <view class="agreement-section">
          <view class="agreement-checkbox" @tap="toggleAgreement">
            <view class="checkbox" :class="{ checked: agreedToTerms }">
              <text class="checkbox-icon">{{ agreedToTerms ? '✓' : '' }}</text>
            </view>
            <text class="agreement-text">
              我已阅读并同意
              <text class="link" @tap.stop="showProtocol('user')">《用户协议》</text>
              和
              <text class="link" @tap.stop="showProtocol('privacy')">《隐私政策》</text>
            </text>
          </view>
        </view>
      </view>


      <view class="decoration-elements">
        <view class="bamboo-left"></view>
        <view class="bamboo-right"></view>
        <view class="cloud-decoration cloud1"></view>
        <view class="cloud-decoration cloud2"></view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { reactive, ref, computed, onMounted } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { mobile, password } from '@/sheep/validate/form';
  import { Base64 } from 'js-base64';

  const loading = ref(false);
  const agreedToTerms = ref(false);


  const registerRef = ref(null);

  // 应用信息
  const appInfo = computed(() => sheep.$store('app').info);

  const registerForm = reactive({
    mobile: '',
    password: '',
    confirmPassword: '',
    wechatCode: '',
    spreadUid: null,
  });


  const confirmPasswordRule = {
    rules: [
      {
        required: true,
        errorMessage: '请确认密码',
      },
      {
        validateFunction: function (rule, value, data, callback) {
          if (value !== data.password) {
            callback('两次输入的密码不一致');
          }
          return true;
        },
      },
    ],
  };


  const registerRules = {
    mobile,
    password,
    confirmPassword: confirmPasswordRule,
  };

  // 输入框样式
  const inputStyles = {
    borderBottom: '2px solid #DAA520',
    borderRadius: '0',
    paddingLeft: '0',
    paddingRight: '0',
    color: '#333',
  };

  function toggleAgreement() {
    agreedToTerms.value = !agreedToTerms.value;
  }

  // 获取微信用户信息
  async function getWechatUserLoginCode() {
    try {
			const res = await uni.login({
				provider: "weixin",
				success: (res) => {
					if (res.code) {
						registerForm.wechatCode = res.code
					}
				},
			});
    } catch (error) {
    }
  }

  // 获取微信手机号
  async function getWechatPhone(e) {
    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
      sheep.$helper.toast('授权失败，请重试');
      return;
    }

    try {
      // 获取微信手机号
      const phoneResult = await sheep.$api.user.getPhonenumber(e.detail.code);
      if (phoneResult) {
        registerForm.mobile = phoneResult;
        sheep.$helper.toast('手机号获取成功');
      }
    } catch (error) {
      sheep.$helper.toast('获取手机号失败，请重试');
    }
  }

  async function register() {
    if (!agreedToTerms.value) {
      sheep.$helper.toast('请先同意服务协议');
      return;
    }

    try {
      await registerRef.value.validate();
    } catch (error) {
      return;
    }

    loading.value = true;
    try {
      // 获取微信用户信息
      await getWechatUserLoginCode();

      const registerData = {
        mobile: registerForm.mobile,
        password: registerForm.password,
        wechatCode: registerForm.wechatCode,
        spreadUid: registerForm.spreadUid || null,
      };

      const result = await sheep.$api.user.smsRegister(registerData);

      if (result) {
        sheep.$helper.toast('注册成功！欢迎加入巴蜀客家！');

        await sheep.$store('user').getInfo();

        try {
          await sheep.$api.user.recordLogin();
        } catch (recordError) {
        }

        // 注册成功后清除scene参数
        uni.removeStorageSync('sceneSpreadUid');

        const pages = getCurrentPages();
        if (pages.length > 1) {
          uni.navigateBack();
        } else {
          uni.switchTab({ url: '/pages/index/index' });
        }
      }
    } catch (error) {
      sheep.$helper.toast(error || '注册失败，请重试');
    } finally {
      loading.value = false;
    }
  }

  // 跳转到登录页面
  function goToLogin() {
    uni.navigateBack();
  }

  // 显示协议
  function showProtocol(type) {
    const protocolMap = {
      user: { id: 'user_agreement', title: '用户协议' },
      privacy: { id: 'privacy_policy', title: '隐私政策' }
    };

    const protocol = protocolMap[type];
    if (protocol) {
      sheep.$router.go('/pages/public/richtext', {
        id: protocol.id,
        title: protocol.title,
      });
    }
  }

  onLoad((options) => {
    if (options.mobile) {
      registerForm.mobile = options.mobile;
    }

    if (options.spm) {
      const shareParams = sheep.$platform.share.decryptSpm(options.spm);
      if (shareParams && shareParams.shareId) {
        registerForm.spreadUid = shareParams.shareId;
      }
    } else if (options.spreadUid) {
      registerForm.spreadUid = options.spreadUid;
    }

    // 检查从首页扫码进入保存的scene参数
    const sceneSpreadUid = uni.getStorageSync('sceneSpreadUid');
    if (sceneSpreadUid && !registerForm.spreadUid) {
      registerForm.spreadUid = sceneSpreadUid;
    }
  });

  onMounted(() => {
    getWechatUserLoginCode();
  });
</script>

<style lang="scss" scoped>

$primary-color: #8B4513;
$secondary-color: #DAA520;
$accent-color: #228B22;
$text-dark: #333;
$text-light: #666;
$bg-light: #FFF8DC;

.register-wrap {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, $primary-color 0%, #A0522D 100%);
  padding: 40rpx;
  overflow: hidden;
}

.register-container {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 30rpx;
  padding: 80rpx 50rpx 60rpx;
  box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba($secondary-color, 0.3);
}

.logo-section {
  text-align: center;
  margin-bottom: 80rpx;

  .brand-logo {
    margin-bottom: 30rpx;

    .logo-text {
      font-size: 56rpx;
      font-weight: bold;
      color: $primary-color;
      font-family: '楷体', 'KaiTi', serif;
      text-shadow: 2rpx 2rpx 4rpx rgba(0,0,0,0.1);
    }

    .logo-decoration {
      width: 120rpx;
      height: 6rpx;
      background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      margin: 15rpx auto 0;
      border-radius: 3rpx;
    }
  }

  .welcome-text {
    font-size: 40rpx;
    font-weight: bold;
    color: $text-dark;
    margin-bottom: 15rpx;
    font-family: '楷体', 'KaiTi', serif;
  }

  .sub-text {
    font-size: 26rpx;
    color: $text-light;
    letter-spacing: 2rpx;
  }
}

.register-form {
  margin-bottom: 50rpx;

  .form-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25rpx;
    padding: 50rpx 40rpx;
    backdrop-filter: blur(10px);
    border: 2rpx solid rgba($secondary-color, 0.15);
    box-shadow:
      0 20rpx 40rpx rgba($primary-color, 0.1),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: linear-gradient(90deg, $primary-color, $secondary-color, $accent-color);
      border-radius: 25rpx 25rpx 0 0;
    }
  }

  :deep(.uni-forms-item) {
    margin-bottom: 50rpx;
  }

  .input-container {
    position: relative;
    margin-bottom: 10rpx;
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    background: rgba($bg-light, 0.5);
    border-radius: 15rpx;
    padding: 15rpx 20rpx;
    transition: all 0.3s ease;
    border: 2rpx solid transparent;

    &:hover {
      background: rgba($bg-light, 0.8);
      border-color: rgba($secondary-color, 0.3);
    }

    .input-icon {
      margin-right: 20rpx;

      .icon-bg {
        width: 50rpx;
        height: 50rpx;
        background: linear-gradient(135deg, $secondary-color, #F4A460);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        box-shadow: 0 6rpx 15rpx rgba($secondary-color, 0.3);

      }
    }

    :deep(.uni-easyinput) {
      flex: 1;
    }

    :deep(.uni-easyinput__content) {
      border: none !important;
      background: transparent !important;
      padding: 0 !important;
    }

    :deep(.uni-easyinput__content-input) {
      font-size: 32rpx !important;
      color: $text-dark !important;
      font-weight: 500 !important;
    }

    .get-phone-btn {
      margin-left: 20rpx;
      padding: 12rpx 20rpx;
      background: linear-gradient(135deg, $accent-color, #32CD32);
      border: none;
      border-radius: 20rpx;
      color: white;
      font-size: 24rpx;
      font-weight: 500;
      box-shadow: 0 6rpx 15rpx rgba($accent-color, 0.3);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 120rpx;
      height: 60rpx;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 4rpx 10rpx rgba($accent-color, 0.4);
      }

      .get-phone-content {
        display: flex;
        align-items: center;
        justify-content: center;

        .get-phone-icon {
          font-size: 20rpx;
          margin-right: 8rpx;
        }

        .get-phone-text {
          font-size: 24rpx;
          letter-spacing: 1rpx;
          color: white;
          font-weight: 500;
        }
      }
    }
  }

  .input-line {
    height: 3rpx;
    background: linear-gradient(90deg, transparent, $secondary-color, transparent);
    margin-top: 10rpx;
    border-radius: 2rpx;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .input-container:focus-within .input-line {
    transform: scaleX(1);
  }
}

.register-btn {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(135deg, $primary-color 0%, #A0522D 100%);
  color: white;
  border: none;
  border-radius: 50rpx;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow:
    0 15rpx 35rpx rgba($primary-color, 0.4),
    inset 0 2rpx 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-top: 20rpx;

  &:active {
    transform: translateY(2rpx);
    box-shadow:
      0 10rpx 25rpx rgba($primary-color, 0.5),
      inset 0 2rpx 0 rgba(255, 255, 255, 0.2);
  }

  .btn-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }

  .btn-text {
    font-family: '楷体', 'KaiTi', serif;
    letter-spacing: 3rpx;
    font-size: 36rpx;
    color: white;
    font-weight: bold;
    text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
    z-index: 11;
  }
}

.login-section {
  text-align: center;
  margin: 50rpx 0;

  .login-text {
    font-size: 28rpx;
    color: $text-light;
  }

  .login-link {
    font-size: 28rpx;
    color: $primary-color;
    margin-left: 10rpx;
    font-weight: 500;
  }
}

.agreement-section {
  margin-top: 30rpx;

  .agreement-checkbox {
    display: flex;
    align-items: flex-start;
    font-size: 26rpx;
    color: $text-light;

    .checkbox {
      width: 36rpx;
      height: 36rpx;
      border: 3rpx solid #ddd;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      flex-shrink: 0;
      margin-top: 2rpx;
      transition: all 0.3s ease;

      &.checked {
        background: $secondary-color;
        border-color: $secondary-color;
        box-shadow: 0 4rpx 12rpx rgba($secondary-color, 0.3);
      }

      .checkbox-icon {
        color: white;
        font-size: 24rpx;
        font-weight: bold;
      }
    }

    .agreement-text {
      flex: 1;
      line-height: 1.8;

      .link {
        color: $primary-color;
        font-weight: 500;
      }
    }
  }
}

// 装饰元素
.decoration-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;

  .bamboo-left,
  .bamboo-right {
    position: absolute;
    width: 80rpx;
    height: 300rpx;
    background: linear-gradient(to bottom,
      rgba($accent-color, 0.1) 0%,
      rgba(darken($accent-color, 10%), 0.15) 50%,
      rgba($accent-color, 0.1) 100%
    );
    border-radius: 40rpx;
  }

  .bamboo-left {
    left: 20rpx;
    top: 150rpx;
    transform: rotate(-15deg);
  }

  .bamboo-right {
    right: 20rpx;
    top: 100rpx;
    transform: rotate(15deg);
  }

  .cloud-decoration {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50rpx;

    &.cloud1 {
      width: 150rpx;
      height: 60rpx;
      top: 10%;
      left: 8%;
      animation: float-left 8s ease-in-out infinite;
    }

    &.cloud2 {
      width: 120rpx;
      height: 50rpx;
      top: 75%;
      right: 10%;
      animation: float-right 6s ease-in-out infinite;
    }
  }
}

// 动画效果
@keyframes float-left {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(15rpx) translateY(-8rpx);
  }
  50% {
    transform: translateX(30rpx) translateY(0);
  }
  75% {
    transform: translateX(15rpx) translateY(8rpx);
  }
}

@keyframes float-right {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(-15rpx) translateY(8rpx);
  }
  50% {
    transform: translateX(-30rpx) translateY(0);
  }
  75% {
    transform: translateX(-15rpx) translateY(-8rpx);
  }
}



// 响应式调整
@media screen and (max-width: 750rpx) {
  .register-container {
    padding: 60rpx 40rpx 50rpx;
    margin: 20rpx;
  }

  .logo-section {
    margin-bottom: 60rpx;

    .brand-logo .logo-text {
      font-size: 48rpx;
    }

    .welcome-text {
      font-size: 36rpx;
    }
  }
}
</style>
